@extends('index')

@section('content')

<div role="tabpanel">

  <ul class="nav nav-tabs" role="tablist" role="tablist" id="myTab">
    <li role="presentation" class="active"><a href="#companys" aria-controls="companys" role="tab" data-toggle="tab">盈亏分析</a></li>
    <li role="presentation"><a href="#cars" aria-controls="cars" role="tab" data-toggle="tab">已销售车型分析</a></li>
  </ul>
  <div class="tab-content">



    <div role="tabpanel" class="tab-pane active" id="companys">
      <div id="cscscs" ></div>
    </div>



    <div role="tabpanel" class="tab-pane" id="cars">
    <div id="dfdfdfd"></div>
  </div>

</div>
</div>
@stop

@section("script")
<script type="text/javascript">
	$(function(){
  $(".menu .jingying-item").toggleClass("hidden");
  $("#yingkui").addClass("active");
    $('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
    });
  getchengben();
  getyingshou();
  getchexing();
  $('#cscscs').highcharts({
        title: {
            text: '今年盈亏情况',
            x: -20 //center
        },
        // subtitle: {
        //     text: 'Source: WorldClimate.com',
        //     x: -20
        // },
        xAxis: {
            categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
            title: {
                text: '价格（万元）'
            },
            // plotLines: [{
            //     value: 0,
            //     width: 1,
            //     color: '#808080'
            // }]
        },
        // tooltip: {
        //     valueSuffix: '°C'
        // },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: true
            }
        },
credits: {  
  enabled: false  
}, 
        series: [{
            name: '成本',
            data: chengben
        }, {
            name: '营收',
            data: yingshou
        }]
    });


    $('#dfdfdfd').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: '今年车型销售占比图'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },

credits: {  
  enabled: false  
}, 
        series: [{
            type: 'pie',
            name: '销售数量百分比',
            data: chexing
        }]
    });
});

function getchengben () {
    $.ajax({
        url:"/shieryuechengben",
        type:"POST",
        async:false,
        data:{
        },
        success:function(json){
            chengben = json;
            // return json.Record.id;
            }
        
    })
}

function getyingshou () {
    $.ajax({
        url:"/shieryueyingshou",
        type:"POST",
        async:false,
        data:{
        },
        success:function(json){
            yingshou = json;
            // return json.Record.id;
            }
        
    })
}
function getchexing () {
    $.ajax({
        url:"/shieryuechexing",
        type:"POST",
        async:false,
        data:{
        },
        success:function(json){
            chexing = json;
            console.log(chexing);
            // return json.Record.id;
            }
        
    })
}
</script>
@stop